<template>
  <a-drawer v-model:visible="visible" class="custom-class" title="全局配置-视频封面" placement="right" width="400"
    :maskClosable="false">
    <a-tabs v-model:activeKey="activeTab" type="card" @change="changeTab">
      <!-- 智能生成 -->
      <a-tab-pane :key="1" tab="智能生成">
        <p style="
            color: rgb(115 122 135);
            font-size: 13px;
            line-height: 1.53;
            white-space: normal;
          ">
          智能截取所选素材的1张最佳画面作为视频封面
        </p>
      </a-tab-pane>
      <!-- 自定义 -->
      <a-tab-pane :key="2">
        <!-- 自定义tab提示 -->
        <template #tab>
          <span>
            <!-- <a-tooltip placement="bottom">
              <template #title
                ></template> -->
            自定义

            <!-- <QuestionCircleOutlined v-if="activeTab == 2" /> -->
            <!-- </a-tooltip> -->
          </span>
        </template>
        <p style="color: rgb(115, 122, 135)">
          建议添加封面和视频尺寸一致，若不一致系统将做智能裁剪
        </p>
        <!-- 封面列表 -->
        <div class="videoCoverList">
          <!-- 素材库导入 -->
          <div class="videoCover-item-upload">
            <div class="videoCover-item-upload-add">
              <span>+</span>
            </div>
            <div class="videoCover-item-uploadOpreat">
              <span class="videoCover-item-upload-top" @click="addVisible = true"><upload-outlined />素材库导入</span>
              <!-- <span class="videoCover-item-upload-middle"></span>
              <span class="videoCover-item-upload-bottom">
                <CloudUploadOutlined />上传
              </span> -->
            </div>
          </div>
          <!-- 封面列表 -->
          <div class="videoCover-item" v-for="(item, index) in material_urlsArr" :key="item.url">
            <img style="height: 100%; object-fit: cover" width="100%" :src="item.url" alt="" />
            <div class="close" @click="deleteItem(item)">
              <close-outlined />
            </div>
          </div>
        </div>
      </a-tab-pane>
      <template #rightExtra>
        <a-button v-show="activeTab == 2 && material_urlsArr.length > 0" type="link" @click="clear">清空</a-button>
      </template>
    </a-tabs>
    <!-- 底部操作按钮 -->
    <template #footer>
      <a-row type="flex" justify="end">
        <a-button style="margin-right: 8px" type="primary" @click="onClose('submit')">确认添加</a-button>
        <a-button @click="onClose('close')">取消</a-button>
      </a-row>
    </template>
    <!-- 素材库导入组件 -->
    <ChooseMaterial :isClip="false" material_type="image" :visible="addVisible" useType="视频封面" @close="chooseMaterial"
      :multiple="true" :haveTags="[
        {
          name: '网络素材',
          key: 'system_materials',
        }
      ]" />
  </a-drawer>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, ref } from "vue";
// 选择文件组件
// import newChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/newChooseMaterial.vue";

import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

import {
  QuestionCircleOutlined,
  UploadOutlined,
  CloudUploadOutlined,
  CaretRightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    // newChooseMaterial,
    QuestionCircleOutlined,
    UploadOutlined,
    CloudUploadOutlined,
    CaretRightOutlined,
    CloseOutlined,
    ChooseMaterial,
  },
  setup() {
    const store = useStore();
    const state = reactive({
      visible: false, //控制页面显示隐藏
      activeTab: 1, //当前切换的tab
      addVisible: false, //控制素材库组件显示隐藏
      cover_config: {}, //封面设置集合
    });
    let material_urlsArr = ref([]); //自定义视频封面图片集合
    // 打开弹窗
    const showDrawer = () => {
      // 复制仓库封面数据
      state.cover_config = JSON.parse(
        JSON.stringify(store.state.videoMixCut.VideoMashup.cover_config)
      );
      material_urlsArr.value = state.cover_config?.material_urls || [];
      // 判断打开页面是否是未设置全局背景
      if (state.cover_config.type == 0) {
        state.activeTab = 1;
      } else {
        state.activeTab = state.cover_config.type;
      }
      console.log(state.cover_config, "全局视频封面设置页面打开");
      state.visible = true;
    };
    // 关闭弹窗
    const onClose = (type) => {
      if (type == "submit") {
        // 判断用户切换到自定义背景设置为选择自定义图片直接提交
        if (state.activeTab == 2 && material_urlsArr.value?.length <= 0) {
          message.error("请选择自定义封面");
          return;
        }
        state.cover_config.type = state.activeTab;
        state.cover_config.material_urls = material_urlsArr.value;
        // 更新仓库
        store.dispatch("videoMixCut/SetVideoMashupItem", {
          key: "cover_config",
          value: state.cover_config,
        });
      }
      console.log(state.cover_config, "全局视频封面");
      state.visible = false;
    };
    // tab栏切换
    const changeTab = (e) => {
      state.activeTab = e;
    };

    const chooseMaterial = (data) => {
      console.log(data, '选择的封面素材');

      if (Array.isArray(data) && data.length) {

        data.forEach((item) => {
          const index = material_urlsArr.value.findIndex((ele) => ele.url == item.material_url);
          if (index == -1) {
            state.cover_config.material_urls.push({
              url: item.material_url,
              media_id: item?.oss_media_id || ''
            });
          }
        });
      }
      console.log(state.cover_config, "全局视频封面")
      state.addVisible = false;
    };
    // 删除某个已选择图片
    const deleteItem = (item) => {
      const index = material_urlsArr.value.findIndex((ele) => ele.url == item.url);
      index != -1 && material_urlsArr.value.splice(index, 1)
    };
    // 清空选择的图片
    const clear = () => {
      material_urlsArr.value = [];
    };
    return {
      ...toRefs(state),
      showDrawer,
      onClose,
      changeTab,
      chooseMaterial,
      deleteItem,
      clear,
      material_urlsArr,
    };
  },
});
</script>
<style lang="less" scoped>
.videoCoverList {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}

.videoCover-item,
.videoCover-item-upload {
  cursor: pointer;
  width: 47%;
  height: 100px;
  margin-right: 10px;
  margin-top: 10px;
  background: #f7f7f7;
  border: 1px solid #e6e6e7;
  border-radius: 5px;
  // overflow: hidden;
}

.videoCover-item-upload {
  background: #f7f7f7;

  .videoCover-item-upload-add {
    width: 100%;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .videoCover-item-uploadOpreat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    height: 100%;
    visibility: hidden;
    cursor: pointer;

    .videoCover-item-upload-top,
    .videoCover-item-upload-bottom {
      display: flex;
      height: 49%;
      align-items: center;
      justify-content: center;
    }

    .videoCover-item-upload-top:hover,
    .videoCover-item-upload-bottom:hover {
      color: #2878ff;
    }

    .videoCover-item-upload-middle {
      height: 1px;
      width: 80%;
      background: #e6e6e7;
    }
  }
}

.videoCover-item-upload:hover .videoCover-item-uploadOpreat {
  visibility: visible;
}

.videoCover-item-upload:hover .videoCover-item-upload-add {
  display: none;
}

.videoCover-item {
  position: relative;
}

.close {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  border-radius: 10px;
  border: 1px solid #c1c1c1;
  background: #fff;
  visibility: hidden;
}

.videoCover-item:hover .close {
  visibility: visible;
}
</style>
